<!doctype html>
<html lang="en" data-bs-theme="auto">
  <head><script src="../assets/js/color-modes.js"></script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人中心-H5</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/dashboard/">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

    <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
  

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

   

     
    </style>

    <!-- Custom styles for this template -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="dashboard.css" rel="stylesheet">
  </head>
  <body>

    <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
  
      <symbol id="list" viewBox="0 0 16 16">
        <path fill-rule="evenodd"
          d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
      </symbol>
    
    </svg>

    <header class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow" data-bs-theme="dark">
      <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white" href="#">个人中心-H5</a>

      <ul class="navbar-nav flex-row d-md-none">
        <li class="nav-item text-nowrap">
          <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu"
            aria-expanded="false" aria-label="Toggle navigation">
            <svg class="bi"><use xlink:href="#list" /></svg>
          </button>
        </li>
      </ul>
    </header>

    <div class="container-fluid">
      <div class="row">
        <div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
          <div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
            <div class="offcanvas-header">
              <h5 class="offcanvas-title" id="sidebarMenuLabel">个人中心-H5</h5>
              <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto">
				<ul class="nav flex-column">
					<li class="nav-item">
					  <a class="nav-link d-flex align-items-center gap-2" aria-current="page" href="#">
						<div class="nav-link-left">
						  <img class="home-page-icon" src="../image/home-page.png" alt="" srcset="" />
						  首页
						</div>
					  </a>
					</li>
					<li class="nav-item">
					  <a class="nav-link d-flex align-items-center gap-2 active" href="#">
						<div class="nav-link-left">
						  <img class="personal-center-icon" src="../image/personal-center.png" alt="" srcset="" />
						  个人中心
						</div>
						<div class="nav-link-right">
						  <img class="retract-icon" src="../image/retract.png" alt="" srcset="" />
						</div>
					  </a>
					  <ul class="secondary-menu-ul">
						<li class="secondary-menu"><a href="" class="secondary-menu-text">・提现</a></li>
						<li class="secondary-menu"><a href="" class="secondary-menu-text">・订单列表</a></li>
						<li class="secondary-menu"><a href="" class="secondary-menu-text">・余额详细信息</a></li>
						<li class="secondary-menu"><a href="" class="secondary-menu-text">・充值</a></li>
						<li class="secondary-menu"><a href="" class="secondary-menu-text">・提现列表</a></li>
						<li class="secondary-menu"><a href="" class="secondary-menu-text">・个人资料</a></li>
						<li class="secondary-menu"><a href="" class="secondary-menu-text">・消息</a></li>
						<li class="secondary-menu"><a href="" class="secondary-menu-text">・客服</a></li>
						<li class="secondary-menu"><a href="" class="secondary-menu-text">・设置</a></li>
						<li class="secondary-menu"><a href="" class="secondary-menu-text">・登录</a></li>
						<li class="secondary-menu"><a href="" class="secondary-menu-text">・注册</a></li>
					  </ul>
					</li>
				  </ul>
             
            </div>
          </div>
        </div>

        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 content-background">
          <div class="data-item">
			  <div class="data-item-content">
				  <div class="balance-term">
					  <div class="balanced-theme">
						  <div class="numerical-value">7521.75</div>
						  <div class="copywriting-style">平衡(美元)</div>
					  </div>
					  <div class="line-stlye"></div>
					  <div class="balanced-theme">
					  	<div class="numerical-value">7527.47</div>
					  	<div class="copywriting-style">利益(美元)</div>
					  </div>
				  </div>
				  <div class="divider-style"></div>
				  <div class="other-content">
					  <div class="other-item">
						  <div class="other-value">0.00</div>
						  <div class="copywriting-style">支付金额(美元)</div>
					  </div>
					  <div class="line-stlye"></div>
					  <div class="other-item">
					  		<div class="other-value">0.00</div>
					  		<div class="copywriting-style">其它(美元)</div>
					  </div>
					  <div class="line-stlye"></div>
					  <div class="other-item">
					  		<div class="other-value">1000</div>
					  		<div class="copywriting-style">积分</div>
					  </div>
				  </div>
			  </div>
		  </div>
		  <div class="button-style">
			  <button class="withdrawal-button" type="button">提现</button>
		  </div>
		  <div class="other-operations">
			  <div class="other-operational-items">
				  <div class="operation-category">
					  <div class="category-item">
						 <img class="img-icon" src="../image/order-list-icon.png" alt="" srcset="" />
						  <div class="category-text">订单列表</div>
					  </div>
					  <div class="category-item">
					  		<img class="img-icon" src="../image/detailed-balance-icon.png" alt="" srcset="" />
					  		<div class="category-text">余额详细信息</div>
					  </div>
					  <div class="category-item">
					  		<img class="img-icon" src="../image/recharge-icon.png" alt="" srcset="" />
					  		<div class="category-text">充值</div>
					  </div>
					  <div class="category-item">
					  		<img class="img-icon" src="../image/withdrawal-list-icon.png" alt="" srcset="" />
					  		<div class="category-text">提现列表</div>
					  </div>
				  </div>
				  <div class="operation-category" style="margin-bottom: 0;">
				  		<div class="category-item">
				  			<img class="img-icon" src="../image/personal-data-icon.png" alt="" srcset="" />
				  			<div class="category-text">个人资料</div>
				  		</div>
				  		<div class="category-item">
				  			<img class="img-icon" src="../image/message-icon.png" alt="" srcset="" />
				  			<div class="category-text">消息</div>
				  		</div>
				  		<div class="category-item">
				  			<img class="img-icon" src="../image/customer-service-icon.png" alt="" srcset="" />
				  			<div class="category-text">客服</div>
				  		</div>
				  		<div class="category-item">
				  			<img class="img-icon" src="../image/set-up-icon.png" alt="" srcset="" />
				  			<div class="category-text">设置</div>
				  		</div>
				  </div>
			  </div>
		  </div>
        </main>
      </div>
    </div>
    <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>
